<template>
  <ConfigProvider v-bind="config">
    <BoTable
      :columns="columns"
      :request="_request"
      ref="tableRef"
      height="auto"
      hidePagination
      :autoload="false"
    ></BoTable>
  </ConfigProvider>
  <FormModal :columns="item">
    <template #details>
      <div class="tip">
        {{ currentInfo.str.join('') }}内延时 共有{{ currentInfo.num }}台设备延时
      </div>
      <BoTable
        :columns="_columns"
        :request="_info"
        hideSearch
        height="auto"
        hidePagination
      ></BoTable>
    </template>
  </FormModal>
</template>

<route lang="json">
{
  "name": "设备延时统计",
  "meta": { "title": "设备延时统计" }
}
</route>

<script setup lang="tsx">
import { computed, h, onMounted, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import {
  BoFormProps,
  BoTable,
  BoTableProps,
  ConfigProvideProps,
  ConfigProvider,
} from '@boeyo/ui';
import { Button, message } from 'ant-design-vue';
import { deviceDelay } from './api';

const tableRef = ref();

const _request = async (params) => {
  const res = await deviceDelay(params);
  return {
    rows: [res.data],
  };
};
onMounted(() => {
  tableRef.value.search({ min: '1' });
});

const config: ConfigProvideProps = {
  renderSearchButton: ({ key, ...otherProps }: any) => {
    switch (key) {
      case 'search':
        const { onClick } = otherProps;
        return h(
          Button,
          {
            type: 'primary',
            ...otherProps,
            onClick: () => {
              message.success('操作成功!');
              onClick?.();
            },
          },
          { default: () => '开始统计' },
        );
      case 'reset':
        return h(Button, { ...otherProps }, { default: () => '重置' });
      case 'expand':
        return h(Button, { ...otherProps }, { default: () => '展开' });
      case 'collapse':
        return h(Button, { ...otherProps }, { default: () => '收起' });
      default:
        return h(Button, { ...otherProps }, { default: () => 'click me' });
    }
  },
};
const delayEnum = {
  1: {
    text: '1分钟',
  },
  5: {
    text: '5分钟',
  },
  30: {
    text: '30分钟',
  },
  60: {
    text: '60分钟',
  },
};

const customRender = (record, str) => {
  const style = {
    color: '#3d90ff',
    textDecoration: 'underline',
    cursor: 'pointer',
  };

  const num = record[str]?.resultList?.reduce((pre, item) => {
    pre += item.count;
    return pre;
  }, 0);
  if (num >= 1)
    return (
      <span style={style} onClick={() => onView(record[str], num, str)}>
        {num}
      </span>
    );
  return <span>{num}</span>;
};
const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '延时分类',
    dataIndex: 'min',
    hideInTable: true,
    valueEnum: {
      ...delayEnum,
    },
    valueType: 'select',
  },
  {
    title: '负延时',
    dataIndex: '负延时',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['负延时']);
    },
  },
  {
    title: '0~1s',
    dataIndex: '0~1秒',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['0~1秒']);
    },
  },
  {
    title: '1~2s',
    dataIndex: '1~2秒',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['1~2秒']);
    },
  },
  {
    title: '2~2.5s',
    dataIndex: '2~2.5秒',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['2~2.5秒']);
    },
  },
  {
    title: '2.5~5s',
    dataIndex: '2.5~5秒',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['2.5~5秒']);
    },
  },
  {
    title: '5~10s',
    dataIndex: '5~10秒',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['5~10秒']);
    },
  },
  {
    title: '10~30s',
    dataIndex: '10~30秒',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['10~30秒']);
    },
  },
  {
    title: '30~60s',
    dataIndex: '30~60秒',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['30~60秒']);
    },
  },
  {
    title: '1~5m',
    dataIndex: '1~5分钟',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['1~5分钟']);
    },
  },
  {
    title: '5~15m',
    dataIndex: '5~15分钟',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['5~15分钟']);
    },
  },
  {
    title: '大于15m',
    dataIndex: '15分钟以上',
    hideInSearch: true,
    customRender({ record }) {
      return customRender(record, ['15分钟以上']);
    },
  },
]);
const _columns = computed<BoTableProps['columns']>(() => [
  {
    title: '关联检测阵',
    dataIndex: 'structureName',
  },
  {
    title: '设备数量',
    dataIndex: 'count',
  },
  {
    title: '设备序列号',
    dataIndex: 'deviceCodes',
    customRender({ record }) {
      return <span>{record.deviceCodes.join(',')}</span>;
    },
  },
]);
const currentInfo: any = ref();
const _info = () => {
  return {
    total: 0,
    rows: currentInfo.value.resultList,
  };
};
const onView = async (record, num, str) => {
  currentInfo.value = { ...record, num, str };

  open({
    title: '延时详情',
    modalType: 'info',
    hideFooter: true,
    request: async (params: any) => {
      message.success('操作成功!');
    },
    defaultValue: {},
  });
};

const { FormModal, open } = useFormModal({
  size: 'middle',
  column: 1,
});

const item = computed<BoFormProps['columns']>(() => [
  {
    title: '',
    dataIndex: 'details',
    valueType: 'input',
    formItemProps: {
      wrapperCol: { span: 24 },
    },
  },
]);
</script>

<style lang="scss" scoped>
.tip {
  padding: 15px 20px;
  background-color: #fff5ed;
  border: 2px solid #f2995a;
  margin: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
</style>
